<template>
  <div style="background-color: #F2F4FA;">
    <div class="wrap wrap-bg">
      <div class="container">
        <div class="step">
          <router-link to="/holdall"><span class="active">工具箱</span></router-link>
          &nbsp;<span>/</span>&nbsp;
          <router-link to="/select_author"><span>诗词起名</span></router-link>
        </div>
        <div class="head-title">
          <span></span>
          <h3>1.选择作者</h3>
          <span></span>
        </div>
        <div class="head-box">
          <el-row :gutter="20">
            <el-col :span="24"
                    :md="19">
              <div class="input-box">
                <i class="el-icon-search"></i>
                <el-input v-model="searchValue"
                          placeholder="搜索作者/诗词"
                          placeholder-class="input-pla"
                          clearable></el-input>
              </div>
            </el-col>
            <el-col :span="12"
                    :md="3"
                    class="mt-3">
              <el-select v-model="selectValue"
                         placeholder="请选择">
                <el-option v-for="item in options"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="12"
                    :md="2"
                    class="mt-3">
              <div class="btn"
                   @click="select">查询</div>
            </el-col>
          </el-row>
        </div>
        <div class="search-hot">
          <span class="hot-title">搜索热词</span>
          <span class="hot-item"
                v-for="(item,index) in hotArr"
                :key="index"
                @click="hotClick(item)">{{item}}</span>
        </div>
      </div>
    </div>
    <div class="container wrap"
         style="padding-top: 30px;">
      <div class="c-center-box box">
        <div class="title"
             id="recom-jump">
          <span class="circle"></span>
          作者筛选
        </div>
        <el-row>
          <el-col :span="24"
                  class="item-box">
            <div class="item">
              <span class="small-title">
                时代
              </span>
              <span class="smll-item"
                    :class="dynastyIndex==-1?'on':''"
                    @click="anthorClick('',-1)">
                全部
              </span>
              <span class="smll-item"
                    v-for="(item,index) in dynastyArr"
                    :key="index"
                    :class="dynastyIndex==index?'on':''"
                    @click="anthorClick(item,index)">
                {{item}}
              </span>
            </div>
          </el-col>
          <el-col :span="24"
                  class="item-box">
            <div class="item">
              <span class="small-title">
                字母
              </span>
              <span class="smll-item"
                    :class="zimuIndex==-1?'on':''"
                    @click="zimuClick('',-1)">
                全部
              </span>
              <span class="smll-item"
                    v-for="(item,index) in zimuArr"
                    :key="index"
                    :class="zimuIndex==index?'on':''"
                    @click="zimuClick(item,index)">
                {{item}}
              </span>
            </div>
          </el-col>
        </el-row>

      </div>

      <div class="c-bottom-box box">
        <div class="title"
             id="recom-jump">
          <span class="circle"></span>
          {{dynasty?dynasty:'全部'}}/{{zimu?zimu:'全部'}}作者
        </div>
        <el-row :gutter="10">
          <el-col :span="12"
                  :md="8"
                  class="item-box"
                  v-for="(item,index) in authors"
                  :key="index">
            <span class="item-index">{{index+1}}.</span>
            <span class="item-name"
                  @click="selectNa(item.zuozhe)">「{{item.zuozhe}}」诗词全集({{item.articlecount}}首)</span>
          </el-col>
        </el-row>
        <div class="page-box">
          <el-pagination background
                         layout="prev, pager, next"
                         :total="recomTotal"
                         :page-size="pageSize"
                         @current-change="pageChange"
                         :pager-count="5">
          </el-pagination>
        </div>
      </div>
    </div>
		<clientBtn></clientBtn>
  </div>
</template>

<script>
import banner from "@/assets/images/classicName/banner2.png"
import clientBtn from '../../components/clientBtn'
export default {
	components: {
    clientBtn
  },
  data () {
    return {
      hotArr: ["李白", "杜甫", "王安石", "李煜", "将进酒", "登高"],
      dynastyArr: ["先秦", "两汉", "魏晋", "南北朝", "隋代", "唐代", "五代", "宋代", "金朝", "元代", "明代", "清代", "近代", "现代", "未知"],//朝代
      dynastyIndex: -1,
      zimuArr: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"],//26个字母
      zimuIndex: -1,
      searchValue: "", //搜索框输入
      options: [{
        label: "全部",
        value: "0"
      },
      {
        label: "作者",
        value: "1"
      },
      {
        label: "诗词",
        value: "2"
      }
      ],
      selectValue: "0",
      authors: [], // 诗词作者列表
      nameInfo: '', // 分析姓名相关的信息
      pageSize: 100,
      pageIndex: 1,
      dynasty: "",
      zimu: "",
      recomTotal: 0, // 总共有多少个推荐的姓名
      nameParams: {}, // 姓名的详细信息
      fliter: [
        "木",
        "火",
        "土",
        "金",
        "水"
      ]
    }
  },
  created () {
    this.nameParams = this.$route.query;
    this.getNameInfo();
    // this.choicenessName();
  },
  mounted () {
    _MEIQIA('hidePanel');
  },
  computed: {
    computeSex () {
      if (this.nameParams.sex == 1) return '男';
      else if (this.nameParams.sex == 0) return '女';
      else return '未知';
    },
    // 根据推荐的姓名个数，显示不同的格式如2000+，3000+
    formatRecomTotal () {
      if (this.recomTotal <= 1000) return this.recomTotal;
      return parseInt(this.recomTotal / 1000) * 1000 + '+';
    }
  },
  methods: {
    selectNa (e) {
      let data = {
        word: e,
        type: this.selectValue
      }
      this.$router.push({
        path: '/select_dynasty',
        query: data
      })
    },
    // 点击查询
    select () {
      let data = {
        word: this.searchValue,
        type: this.selectValue
      }
      this.$router.push({
        path: '/select_dynasty',
        query: data
      })
    },
    hotClick (e) {
      this.searchValue = e
    },
    anthorClick (e, i) {
      this.dynasty = e
      this.dynastyIndex = i
      this.getNameInfo()
    },
    zimuClick (e, i) {
      this.zimu = e
      this.zimuIndex = i
      this.getNameInfo()
    },
    // 生成随机字符串
    randomString (len) {
      len = len || 32;
      var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
      var maxPos = $chars.length;
      var pwd = '';
      for (let i = 0; i < len; i++) {
        pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
      }
      return pwd;
    },
    // 查看诗词作者
    getNameInfo () {
      this.$ajax.post("/util/author", {
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        chaodai: this.dynasty,
        pinyin: this.zimu
      })
        .then(res => {
          if (res.data.code == 0) {
            // this.nameInfo = res.data.data;
            this.authors = res.data.data.list
            this.recomTotal = res.data.data.total

          } else {
            this.$message.error(res.data.msg)
          };
        });
    },
    // 用户点击推荐姓名的分页
    pageChange (page) {
      console.log(page)
      this.pageIndex = page;
      this.getNameInfo();
      window.scroll(0, 0)
    },


  }
}
</script>

<style scoped>
.item-index {
  font-size: 15px;
  color: #424242;
}
.item-name {
  color: #3d5dea;
  font-size: 15px;
  cursor: pointer;
}
.c-center-box .smll-item.on {
  cursor: text;
  color: #838383;
}
.item .small-title {
  font-size: 16px;
  font-family: PingFangSC;
  font-weight: 300;
  color: rgba(131, 131, 131, 1);
  line-height: 24px;
  margin-right: 10px;
}
.item .smll-item {
  margin-left: 15px;
  cursor: pointer;
  font-size: 15px;
  font-family: PingFangSC;
  font-weight: bold;
  color: rgba(61, 93, 234, 1);
  line-height: 24px;
}
.head-box {
  width: 100%;
  padding: 20px;
  background: linear-gradient(
    58deg,
    rgba(235, 235, 246, 1),
    rgba(235, 236, 246, 1)
  );
  border-radius: 10px;
}

.input-box {
  max-height: 50px;
  min-height: 45px;
  background-color: #fff;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  border-radius: 8px;
  padding: 0 20px;
}

.input-box i {
  color: #c9c9c9;
}

.input-pla {
  color: #c9c9c9;
  font-size: 18px;
}

.btn {
  user-select: none;
  cursor: pointer;
  min-height: 42px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(
    32deg,
    rgba(64, 92, 218, 1),
    rgba(149, 94, 241, 1)
  );
  border-radius: 8px;
}
.search-hot {
  margin: 19px 0 36px;
}
.search-hot span {
  color: #fff;
  margin-right: 30px;
}
.hot-title {
  color: #cdcffc !important;
}
.hot-item {
  cursor: pointer;
  margin: 5px 0;
  display: inline-flex;
}

.head-title {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  line-height: 20px;
  transform: translateY(-20px);
}

.head-title h3 {
  font-size: 25px;
  font-family: BigruixianBlackGBV1.0;
  font-weight: bold;
  color: rgba(253, 253, 253, 1);
  line-height: 16px;
  text-shadow: 6px 8px 6px rgba(55, 37, 152, 0.33);
}

.head-title span {
  display: inline-flex;
  background-color: #fff;
  width: 15px;
  height: 3px;
  margin: 0 10px;
  box-shadow: 6px 8px 6px rgba(55, 37, 152, 0.33);
}

.wrap {
  position: relative;

  font-size: 15px;
  background-color: rgb(241, 242, 249);
  padding-bottom: 1px;
}
.wrap-bg {
  background: url(../../assets/images/classicName/banner2.png) top no-repeat;
}

.step {
  padding: 25px 0;
}

.step .active {
  color: #fff;
}

.step span {
  color: #ccc;
}

.box {
  background: #fff;
  padding: 30px;
  border-radius: 10px;
  margin-bottom: 30px;
}

.top-box .avatar-box {
  text-align: center;
  width: 90px;
  overflow: hidden;
  height: 90px;
}

.top-box .avatar-box img {
  width: 100%;
}

.top-box .item .left {
  color: rgb(131, 131, 131);
}

.top-box .item .right {
  color: rgb(61, 93, 234);
}

.top-box .item-box .item {
  margin-top: 20px;
  display: flex;
  align-items: center;
}

.top-box .item-box .item:first-child {
  margin-top: 0px;
}

.top-box .item-box .item .persent {
  height: 6px;
  width: 100px;
  display: inline-block;
  vertical-align: center;
  border-radius: 3px;
  margin-left: 10px;
  background: linear-gradient(left, rgb(98, 146, 225), rgb(240, 240, 240));
}

.c-center-box .title,
.c-bottom-box .title {
  color: #000;
  font-size: 18px;
  display: flex;
  font-weight: 600;
  align-items: center;
  margin-bottom: 15px;
}

.c-center-box .title .circle,
.c-bottom-box .title .circle {
  display: inline-block;
  border-radius: 50%;
  border: 4px solid rgb(250, 97, 102);
  width: 18px;
  margin-right: 10px;
  height: 18px;
}

.c-center-box .item {
  margin-top: 10px;
  line-height: 1.5;
}

.c-center-box .item .left {
  color: #000;
  font-weight: bold;
}

.c-center-box .item .right {
  color: rgb(46, 46, 46);
}

.c-bottom-box .item-box {
  /* text-align: center; */

  margin-top: 20px;
}

@media screen and (max-width: 450px) {
  .mt-3 {
    margin-top: 10px;
  }
  .item-box .item {
    margin-top: 15px !important;
  }

  .page-box {
    margin-left: -18px;
    margin-right: -18px;
  }

  .box {
    padding-left: 10px;
    padding-right: 10px;
  }

  .c-bottom-box .item {
    width: 100% !important;
    padding: 0 10px !important;
  }

  .c-bottom-box .item .name {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    /* width: 60%!important; */
    font-size: 14px !important;
    color: rgb(61, 93, 234);
  }

  .c-bottom-box .item .name .xing {
    color: #000;
    display: inline-block;
    margin-right: 1px !important;
  }

  .c-bottom-box .item .name .score {
    background-color: #ff5f5f;
    display: inline-flex;
    width: auto !important;
    height: 15px !important;
    padding: 0 2px !important;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    color: #fff;
    font-size: 12px !important;
  }

  .c-bottom-box .item .detail {
    display: inline-block;
    color: rgb(131, 131, 131);
    cursor: pointer;
    font-size: 14px;
    padding-left: 8px !important;
    border-left: 1px solid rgb(131, 131, 131);
    transition: all 0.3s;
  }
}

.c-bottom-box .item {
  width: 234px;
  height: 72px;
  display: flex;
  margin: auto;
  align-items: center;
  padding: 0 30px;
  justify-content: space-between;
  background: url(../../assets/images/classicName/name_bg.png) no-repeat;
  background-size: 100% 100%;
}

.c-bottom-box .item .name {
  font-size: 17px;
  color: rgb(61, 93, 234);
}

.c-bottom-box .item .name .xing {
  color: #000;
  display: inline-block;
  margin-right: 6px;
}

.c-bottom-box .item .name .score {
  background-color: #ff5f5f;
  display: inline-flex;
  width: 50px;
  height: 20px;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  color: #fff;
  font-size: 16px;
}

.c-bottom-box .item .detail {
  display: inline-block;
  color: rgb(131, 131, 131);
  cursor: pointer;
  font-size: 14px;
  padding-left: 8px;
  border-left: 1px solid rgb(131, 131, 131);
  transition: all 0.3s;
}

.c-bottom-box .item .detail:hover {
  color: rgb(61, 93, 234);
}

.page-box {
  text-align: center;
  margin-top: 50px;
}
</style>
